<template>
  <div class="main">
     <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData"
    >
    <div class="item" v-for="item in list" :key="item.filmId">
      <van-card class="filmCard">
        <template #thumb>
          <img :src="item.poster" :alt="item.name" />
        </template>
        <template #title>
          <div class="item-title">{{ item.name }}
            <span class="itemname">{{item.item.name}}</span>
          </div>
        </template>
        <template #desc>
          <div class="desc">
            <div class="item-grade">
              主演: <span>{{ item.actors | parseActor }}</span>
            </div>
            <div class="item-intro">
              <span>上映日期: {{item.premiereAt | parseActors}}</span>
            </div>
          </div>
        </template>
      </van-card>
      <div class="butBtn">
        <van-tag plain type="danger" size="large" color="#ffb232">预约</van-tag>
      </div>
    </div>
     </van-list>
  </div>
</template>

<script>
import url from "@/config/url";
import moment from "moment"
import Vue from "vue";
import { Card } from "vant";

Vue.use(Card);
export default {
  data(){
    return{
      // 页数
      page:1,
      // 获取列表
      list:[],
      // 当前是否处于加载中
      loading: false,
      // 所有的数据是否已经请求完毕
      finished: false,
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$http.get(url.comingSoon, {
        
      }).then(res=>{
        this.list = res.data.data.films
         if(Math.ceil(this.total / 10 > this.page)){
              // 还有数据可以请求
              this.page =this.page +1
            }else{
              // 没有数据可以被请求
              this.finished =true
            }
            // 本次请求完毕
            this.loading = false
      })
    },
  },
  filters:{
    parseActor(actors){
      if(actors){
        var str = ""
        actors.forEach(el =>{
        str += el.name + ' '
      })
      // 溢出隐藏
        return str.length >13 ? str.slice(0,13) + "..." : str
      
      }else{
        return "暂无主演"
    }
  },
    parseActors(premiereAt){
      const week = moment(premiereAt * 1000).format('E') === '7' ? 0 : moment(premiereAt * 1000).format('E')
      const mouth = moment(premiereAt * 1000).format('M-D')
      const num = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      return num[week] + ' ' + mouth.replace('-', '月')
         }
}
}
</script>

<style scoped>
.main{
  margin-top: 15px;
  margin-bottom: 50px;
}
.item{
  display: flex;
  border-bottom: 1px solid #eee;
  background-color: #fafafa;
}
.filmCard{
  width: 85%;
}
.van-card{
  padding: 30px 16px;
  font-size: 16px;
}
.van-card__thumb{
    width: 66px;
}
.van-card__thumb img{
  width: 66px;
  height: 99px;
  border-radius: 0px;
}
.desc{
    font-size: 13px;
    color: #797d82;
}
.desc >div{
    margin-top: 6px;
}
.butBtn{
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.item-title{
  margin-top: 10px;
}
.itemname{
  padding: 2px 2px; 
  background-color: #d2d6dc;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}
</style>